<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="6">
          <span class="addCustomerText">客户详情</span>
        </el-col>
        <el-col :span="18">
          <el-row type="flex" justify="end">
            <el-button @click="goback">返回</el-button>
          </el-row>
        </el-col>
      </el-row>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="客户信息" name="first" />
        <el-tab-pane label="地址信息" name="second" />
        <el-tab-pane label="开票信息" name="third" />
      </el-tabs>

      <!-- 客户信息 -->
      <div v-show="activeName === 'first'">
        <!-- 客户信息填写 -->
        <el-form ref="customerFormRef" :model="customerForm" label-width="120px" style="margin-top: 20px">
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="客户编码: ">
                <el-input disabled v-model="customerForm.customer_code" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="客户名称: " prop="customer_name">
                <el-input disabled v-model="customerForm.customer_name" placeholder="请输入客户名称" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="国家: " prop="customer_country">
                <el-input disabled v-model="customerForm.customer_country" placeholder="请输入国家" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="来源: " prop="customer_origin">
                <el-input disabled v-model="customerForm.customer_origin" placeholder="请输入来源" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="旺旺/客户ID: " prop="customer_id">
                <el-input disabled v-model="customerForm.customer_id" placeholder="请输入旺旺" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="邮箱: " prop="customer_email">
                <el-input disabled v-model="customerForm.customer_email" placeholder="请输入邮箱" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 联系方式 -->
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="联系方式">
                <template #default="{ row }">
                  <el-row :gutter="20" style="margin-top: 30px">
                    <el-col :span="7">
                      <el-form-item label="手机">
                        <el-input disabled v-model="customerForm.customer_contact_ways.phone" placeholder="请输入手机" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="7">
                      <el-form-item label="微信">
                        <el-input disabled v-model="customerForm.customer_contact_ways.wechat" placeholder="请输入微信" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="7">
                      <el-form-item label="WhatsApp">
                        <el-input disabled v-model="customerForm.customer_contact_ways.whatsApp"
                          placeholder="请输入WhatsApp" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20" style="margin-top: 20px; margin-left: 5px">
                    <el-col :span="7">
                      <el-form-item label="座机">
                        <el-input disabled v-model="customerForm.customer_contact_ways.call" placeholder="请输入座机" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="7">
                      <el-form-item label="QQ">
                        <el-input disabled v-model="customerForm.customer_contact_ways.qq" placeholder="请输入QQ" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="主要沟通方式" prop="customer_main_chat_ways">
            <el-checkbox-group disabled v-model="customerForm.customer_main_chat_ways">
              <el-checkbox label="1">邮箱</el-checkbox>
              <el-checkbox label="2">手机</el-checkbox>
              <el-checkbox label="3">微信</el-checkbox>
              <el-checkbox label="4">WhatsApp</el-checkbox>
              <el-checkbox label="5">座机</el-checkbox>
              <el-checkbox label="6">QQ</el-checkbox>
              <el-checkbox label="7">平台账号</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="跟进转态" prop="customer_flow_up_status">
                <el-select disabled v-model="customerForm.customer_flow_up_status" placeholder="请选择跟进状态">
                  <el-option label="客户比价中" value="1" />
                  <el-option label="客户觉得物流贵" value="2" />
                  <el-option label="报价后客户未读未回" value="3" />
                  <el-option label="报价后客户已读不回" value="4" />
                  <el-option label="客户暂无设计图纸" value="5" />
                  <el-option label="客户未提供报价信息" value="6" />
                  <el-option label="自定义" value="7" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="公司名称: " prop="customer_company_name">
                <el-input disabled v-model="customerForm.customer_company_name" placeholder="请输入公司名称" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="公司官网: ">
                <el-input disabled v-model="customerForm.customer_company_site" placeholder="请输入公司官网" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-input disabled v-model="customerForm.customer_flow_up_mark" placeholder="请输入跟进状态详情" type="textarea" />
          </el-form-item>
          <el-form-item label="备注信息">
            <el-input disabled v-model="customerForm.customer_mark_msg" placeholder="请输入备注信息" type="textarea" />
          </el-form-item>
        </el-form>
      </div>

      <!-- 地址信息 -->
      <div v-show="activeName === 'second'">
        <!-- 地址列表 -->
        <vxe-grid ref="formRef" border background resizable max-height="480" align="center"
          :columns="addressTableColumn" :data="addressTabelData" :loading="loading"
          :row-config="{ height: 43, isCurrent: true, isHover: true }" show-overflow>
          <!-- 分页器 -->
          <!-- <template #pager>
                        <vxe-pager :layouts="[
                            'Sizes',
                            'PrevJump',
                            'PrevPage',
                            'Number',
                            'NextJump',
                            'FullJump',
                            'Total',
                        ]" :current-page.sync="tablePage.page_num" :page-size.sync="tablePage.page_amounts"
                            :total="tablePage.total" @page-change="handlePageChange" />
                    </template> -->
        </vxe-grid>
      </div>

      <!-- 开票信息 -->
      <div v-show="activeName === 'third'">
        <!-- 开票信息 -->
        <vxe-grid ref="formRef" border background resizable max-height="480" align="center"
          :columns="invoiceTableColumn" :data="invoiceInfoTabelData" :loading="loading"
          :row-config="{ height: 43, isCurrent: true, isHover: true }" show-overflow>
          <!-- 分页器 -->
          <!-- <template #pager>
                        <vxe-pager :layouts="[
                            'Sizes',
                            'PrevJump',
                            'PrevPage',
                            'Number',
                            'NextJump',
                            'FullJump',
                            'Total',
                        ]" :current-page.sync="tablePage.page_num" :page-size.sync="tablePage.page_amounts"
                            :total="tablePage.total" @page-change="handlePageChange" />
                    </template> -->
        </vxe-grid>
      </div>

    </el-card>
  </div>
</template>

<script>
import { getCustomerAllDataDetailAPI } from '@/api/customer'
export default {
  props: {
    customerCid: {
      // type: Number,
      required: true
    }
  },
  data() {
    return {
      // showCustomerInfo: false,
      activeName: 'first',
      chatType: '',
      active: 1, // steps选中
      invoiceInfoForm: {
        invoiceName: '',
        invoiceCode: ''
      },
      invoiceInfoTabelData: [
        {
          invoiceName: '霜霜',
          invoiceCode: '1001'
        },
        {
          invoiceName: '霜霜',
          invoiceCode: '1001'
        },
        {
          invoiceName: '霜霜',
          invoiceCode: '1001'
        }
      ],

      addressTableColumn: [
        // { type: 'checkbox', width: 50 },
        { type: 'seq', title: '序号', width: 60 },
        { field: 'reciver_country', title: '国家' },
        { field: 'reciver_email_code', title: '邮政编码' },
        { field: 'reciver_name', title: '收件人' },
        { field: 'reciver_phone', title: '联系电话' },
        { field: 'reciver_address_detail', title: '详细地址' },
        { field: 'reciver_email', title: '联系邮箱' },
      ],
      addressTabelData: [],
      loading: false,


      invoiceTableColumn: [
        // { type: 'checkbox', width: 50 },
        { type: 'seq', title: '序号', width: 60 },
        { field: 'invoice_name', title: '开票名称' },
        { field: 'bank_code', title: '组织信用代码' },
        { field: 'account_name', title: '账户名称' },
        { field: 'bank_name', title: '开户名称' },
        { field: 'bank_account', title: '银行账号' },
      ],
      invoiceInfoTabelData: [],

      customerForm: {
        customer_name: '',
        customer_country: '',
        customer_origin: '',
        customer_id: '',
        customer_email: '',
        customer_contact_ways: {
          phone: '',
          wechat: '',
          whatsApp: '',
          call: '',
          qq: ''
        },
        customer_flow_up_mark: '',
        customer_main_chat_ways: [],
        customer_flow_up_status: '',
        customer_company_name: '',
        customer_company_site: '',
        customer_mark_msg: ''
      },
    }
  },

  mounted() {
    this.getCustomerAllData()
  },
  methods: {
    async getCustomerAllData() {
      const res = await getCustomerAllDataDetailAPI(this.customerCid)
      res.data.customer_info.customer_main_chat_ways = res.data.customer_info.customer_main_chat_ways.split(',')
      this.addressTabelData = res.data.address_info
      this.invoiceInfoTabelData = res.data.invoice_info
      this.customerForm = res.data.customer_info
    },


    // 点击返回
    goback() {
      this.$emit('goback')
    },

    // 切换tab栏
    handleClick(tab, event) {
      console.log(tab)
      this.activeName = tab.name
    }
  }
}
</script>

<style lang="scss" scoped>
.addCustomerText {
  color: #1ecba3;
  font-size: 22px;
}
</style>
